import { useEffect, useState } from "react";
import { TreeSelect, ConfigProvider } from "antd";
import { queryCityTree } from "@/api/public";
import selectArrowLight from "@/assets/theme/select-arrow-light.png";
import styles from "./index.module.scss";
import selectArrow from "@/assets/theme/select-arrow.png";
import { useSelector, useDispatch } from "react-redux";
export default function SelectProject(props) {
  const [options, setOptions] = useState([]);
  const theme = useSelector((state) => state.theme);
  useEffect(() => {
    getOption();
  }, []);

  function getOption() {
    queryCityTree().then((res) => {
      if (res?.code === 0) {
        const result =
          res.data.map((item) => {
            return {
              id: item.s_cId,
              value: item.s_cId,
              label: item.provnice,
              children: [],
            };
          }) || [];
        setOptions(result);
      }
    });
  }

  function onChange(value, label, extra) {
    props.getSelectValue(value, label, extra);
  }
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        components: {
          Select: {
            paddingSM: 55,
            colorTextPlaceholder: "#ffffff",
            colorText: "#ffffff",
            algorithm: false,
            primaryShadow: "0px 0px 12px rgba(0, 0, 0, 0)",
            hoverBorderColor: "transparent",
            activeBorderColor: "transparent",
            colorBorder: "transparent",
            colorBgElevated: "rgb(20, 31, 57)",
            optionSelectedBg: "rgb(143, 172, 215)",
            colorBgContainer: "transparent",
            controlOutlineWidth: "0",
          },
          TreeSelect: {
            colorText: "#ffffff",
            nodeSelectedBg: "#1677ff",
            colorBgElevated: "rgb(20, 31, 57)",
          },
        },
      }}
    >
      <div className={styles.selectBox}>
        <TreeSelect
          allowClear
          popupClassName="TreeSelectClass"
          treeCheckable={true}
          maxTagCount={"responsive"}
          style={{
            width: "100%",
          }}
          suffixIcon={
            <img
              style={{ width: 14, height: 14 }}
              src={theme ? selectArrowLight : selectArrow}
              alt="加载中..."
            />
          }
          dropdownStyle={{
            maxHeight: 400,
            overflow: "auto",
          }}
          placeholder="请选择区域"
          onChange={onChange}
          treeData={options}
        />
      </div>
    </ConfigProvider>
  );
}
